<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        section{
            width: 100px;
            height: 100px;
            margin: 10px;
            background-color: brown;
        }
        table tr td{
            border: 1px solid black;
        }
        table{
            border-collapse: collapse;
        }
        .current{
            background-color: red;
            color: #ffffff;
        }
        .current1{
            background-color: seagreen;
            font-size: 25px;
        }
        .error{
            background-color: slateblue;
        }
    </style>
    <script src="../vue.js"></script>

    <script>
        window.onload=function(){
            var app=new Vue({
                el:'#app',
                data:{
                    name:'lisi',
                    age:12,
                    str:'<h1>hhh</h1>',
                    id:'two',
                    title:'hauhua',
                    a:0,
                    show:false,
                    list:['苹果','桃子','葡萄','提子','火龙果'],
                    student:[{
                        name:'lisi',
                        age:12,
                        gender:'female'
                    },{
                        name:'huahua',
                        age:22,
                        gender:'female'
                    },{
                        name:'lili',
                        age:25,
                        gender:'male'
                    },{
                        name:'tom',
                        age:12,
                        gender:'male'
                    }],
                    object:{
                        name:'zhangsan',
                        age:20,
                        gender:'women',
                        address:'江苏省'

                    },
                    loginType:'username',
                    current:'current',
                    iscurrent:false,
                    current1:'current1',
                    error:'error',
                    a:'blue',
                    b:'50px',
                    style:{color:'pink',fontSize:'5px'},
                    style1:{backgroundColor:'yellow'}

                

                },

                methods:{
                    handler:function(){
                        alert('handler----')
                    },
                    toggle:function(){
                        this.loginType='a'
                    }
                }
            })
        }
    </script>
</head>
<body>
    <div id="app">
        <section v-bind:style='[style,style1]'>hahha</section>
        <hr>
        <section :class='[iscurrent?current:error]'>class</section>
        <hr>
        <template v-if="loginType === 'username'"> 
            <label>Username</label> 
            <input placeholder="Enter your username" key='one'> 
        </template> 
        <template v-else> 
            <label>Email</label> 
            <input placeholder="Enter your email address" key='two'> 
        </template>
        <button @click='toggle'>toggle</button>
        <hr>
        <ul>
            <li v-for='(value,key,index) in object'>
                {{key}}-{{value}}-{{index}}
            </li>
        </ul>
        <hr>
        <table>
            <tr v-for='item in student'>
                <td>{{item.name}} </td>
                <td>{{item.age}} </td>
                <td>{{item.gender}} </td>
            </tr>
        </table>
        <hr>
        <ul>
            <li v-for='(item,index) in list'>{{item}}-{{index}} </li>
            <!-- <li v-for='(item,index) of list'>{{item}}-{{index}} </li> iterator的遍历方式 -->
            
        </ul>
        <hr>
        <section v-show='show'>show</section>
        <hr>
        <template v-if='a'>
            <section>111</section>
            <section>222</section>
            <section>333</section>
        </template>
        <template v-else> 
            <section>444</section>
            <section>555</section>
            <section>666</section>
        </template>
        <hr>
        <section v-if='a==1'>111</section>
        <section v-else-if='a==2'>222</section>
        <section v-else>333</section>
        <hr>
        <p>{{name+'hello'}}-{{age+20}} </p>
        <p v-html='str'>hello</p>
        <p v-bind:id='id' v-bind:title='title'></p>
        <p :id='id'></p>
        <p v-on:click='handler'>click</p>
        <p @click='handler'>click--------</p>
    </div>
</body>
</html>